<template>
	<div class="wapper">	
		<swiper :options="swiperOption">
		    <swiper-slide v-for="item of list" :key="item.id" v-if="showSwiper">
		    	<img class="images" :src="item.imgUrl" />
		    </swiper-slide>
		    <!--<swiper-slide> 
		    	<img class="images" src="http://img1.qunarzz.com/piao/fusion/1811/31/da037478f37cf202.jpg_750x200_fe28d396.jpg"/> 
		    </swiper-slide>-->
		  
		    <!-- Optional controls -->
		    <div class="swiper-pagination"  slot="pagination"></div>
		</swiper>
	</div>
</template>

<script>
export default{
	name:'HomeSwiper',
	props:{
		list:Array
	},
	data (){
		return{
			swiperOption:{
				pagination:'.swiper-pagination'
			}
//			swiperList:[{
//				id:'0001',
//				imgUrl:'http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20191/3921acb51460dc6fa9e3c7464fac5cbb.jpg_750x200_d992573a.jpg'
//			},{
//				id:'0002',
//				imgUrl:'http://img1.qunarzz.com/piao/fusion/1811/31/da037478f37cf202.jpg_750x200_fe28d396.jpg'
//			}]
		}
	},
	computed:{
		showSwiper(){
			return this.list.length
		}
	}
}
</script>


<!--<style>
	.swiper-pagination-bullet-active{
		background-color: #42B983 !important;
	}
</style>-->
<style scoped>
	.wapper >>> .swiper-pagination-bullet-active{      /*>>>样式穿透*/
		background-color: #42B983 !important;
	}
	.wapper{
		overflow: hidden;
		width: 100%;
		height: 0;
		padding-bottom: 31.79%;
	}
	.images{
		display: block;
		width: 100%;
	}
	
</style>
